<template>
	<view class="">
		<view class="" style="padding-top: 36rpx;padding-left: 32rpx;font-size: 32rpx;font-weight: 700;color: #000000;">
			选择要交接的员工
		</view>
		<!-- 搜索 -->
		<view class="" style="background: #fff;padding: 36rpx 0 8rpx 0;">
			<view class="flex align-center"
				style="margin: 0 32rpx 0 32rpx;background: #F3F3F3;border-radius: 8rpx;padding: 14rpx 24rpx;">
				<view class="" style="font-size: 0;margin-right: 14rpx;">
					<image style="width: 40rpx;height: 40rpx;" src="./static/10.png" mode=""></image>
				</view>
				<input @input="search" class="flex-1" type="text" v-model="keyWords" placeholder="搜索">
				<!-- <view v-if="keyWords" class="" style="font-size: 0;margin-left: 10rpx;">
					<image @click="cha" style="width: 28rpx;height: 28rpx;" src="./static/21.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<!-- 成员列表 -->
		<view class="" style="padding: 32rpx 32rpx 0 0;" @click="select(item,index)" v-for="(item,index) in list" :key="index">
			<view class="flex align-center">
				<view class="" style="font-size: 0;margin: 0 32rpx;margin-bottom: 20rpx;">
					<view class="" v-if="item.isSelect==0" style="width: 36rpx;height: 36rpx;border: 2rpx solid #999999;border-radius: 50%;">
						
					</view>
					<image v-else style="width: 36rpx;height: 36rpx;" src="static/6.png" mode=""></image>
				</view>
				<view class="flex-1 flex" style="border-bottom: 2rpx solid #EFEFEF;padding-bottom: 20rpx;">
					<view class="" style="font-size: 0;margin-right: 20rpx;">
						<image style="width: 84rpx;height: 84rpx;border-radius: 50%;" :src="item.avatar" mode=""></image>
					</view>
					<view class="flex flex-clum justify-between" style="height: 84rpx;">
						<view class="" style="font-size: 30rpx;font-weight: 500;color: #333333;">
							{{item.name}}
						</view>
						<view class="" style="font-size: 24rpx;color: #666666;">
							{{item.mobile}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 确定 -->
		<view class="flex justify-center"
			style="padding-bottom: 76rpx;background: #fff;opacity: 0;">
			<view class=""
				style="padding: 20rpx 287rpx;border-radius: 40rpx;background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);font-size: 28rpx;font-weight: 700;color: #FFFFFF;">
				确定
			</view>
		</view>
		<view class="flex justify-center"
			style="position: fixed;bottom: 0;width: 100%;padding-bottom: 10rpx;background: #fff;">
			<view class="" @click="confirm"
				style="padding: 20rpx 287rpx;border-radius: 40rpx;background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);font-size: 28rpx;font-weight: 700;color: #FFFFFF;">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				keyWords:'',
				use_id:0,
				shopId:0,
				selectId:0,//选中的id
				list:[],//离职人员列表
			}
		},
		onLoad(options) {
			this.use_id = options.use_id;
			this.user_id = options.user_id;
			this.shopId = options.shopId;
			this.getList();
		},
		methods:{
			// 获取在职人员列表
			getList(){
				this.$request({
					url: 'Shopuser/user_on',
					method: 'POST',
					data: {
						keyword:this.keyWords,
						shop_id:this.shopId,
					}
				}).then(res => {
					for(let i=0;i<res.data.data.length;i++){
						res.data.data[i].isSelect = 0;
					}
					this.list = res.data.data.filter(item => item.id != this.user_id);
				})
			},
			//选择人员
			select(item,index){
				if(item.isSelect==0){
					for(let i=0;i<this.list.length;i++){
						this.list[i].isSelect=0;
					}
					this.list[index].isSelect=1;
					this.selectId = item.id;
				}else{
					this.list[index].isSelect=0;
					this.selectId = 0;
				}
			},
			// 搜索
			search(){
				this.getList();
			},
			//点击确定
			confirm(){
				if(this.selectId==0){
					uni.showToast({
						title:'请选择要交接的员工',
						icon:'none'
					})
					return;
				}
				this.$request({
					url: 'Shopuser/user_del',
					method: 'POST',
					data: {
						id:this.use_id,
						type:1,
						to_user_id:this.selectId
					},
				}).then(res => {
					if(res.data.code==1){
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					}else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
	}
	
	.flex-1 {
		flex: 1;
	}
	
	.flex-clum {
		flex-direction: column;
	}
	
	.align-center {
		align-items: center;
	}
	
	.align-end {
		align-items: flex-end;
	}
	
	.justify-center {
		justify-content: center;
	}
	
	.justify-between {
		justify-content: space-between;
	}
</style>